<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="财务数据"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 图表区域 -->
      <view class="chart-container">
        <view class="chart-header">
          <text class="chart-title">近七日数据曲线</text>
          <view class="business-status" @click="showDataTypeMenu">
            <text class="status-dot"></text>
            <text class="status-text">{{ currentDataType }}</text>
            <uni-icons type="bottom" size="14" color="#ff9900"></uni-icons>
          </view>
        </view>

        <!-- 图表 -->
        <view class="chart-wrapper" ref="chartWrapperRef">
          <qiun-ucharts
            type="line"
            :opts="chartOpts"
            :chartData="chartData"
            canvas-id="lineChart"
            :cWidth="chartWidth"
            :cHeight="chartHeight"
          />
        </view>
      </view>

      <!-- 数据统计范围 -->
      <view class="date-range-section">
        <view class="date-range-header">
          <text class="section-title">数据统计范围</text>
          <view class="date-range-display" @click="showDatePicker">
            <text class="date-range-text">{{ dateRangeText }}</text>
            <uni-icons type="bottom" size="16" color="#ff9900"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 统计数据列表 -->
      <view class="stats-list">
        <view v-for="item in statsList" :key="item.label" class="stats-item">
          <text class="stats-label">{{ item.label }}</text>
          <text class="stats-value">{{ item.value }}</text>
        </view>
      </view>

      <!-- 导出明细按钮 -->
      <view class="export-button" @click="handleExport">
        <text>导出明细</text>
      </view>
    </view>

    <!-- 日期范围选择器 -->
    <DateRangePicker
      ref="datePickerRef"
      @confirm="handleDateConfirm"
      @reset="handleDateReset"
    />

    <!-- 数据类型下拉菜单 -->
    <uni-popup ref="dataTypeMenuRef" type="bottom">
      <view class="data-type-menu">
        <view
          v-for="item in dataTypeList"
          :key="item"
          class="menu-item"
          :class="{ active: item === currentDataType }"
          @click="selectDataType(item)"
        >
          <text class="menu-item-text">{{ item }}</text>
          <uni-icons
            v-if="item === currentDataType"
            type="checkmarkempty"
            size="16"
            color="#fabc02"
          ></uni-icons>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import QiunUcharts from "@/components/qiun-ucharts/qiun-ucharts.vue";
import DateRangePicker from "./components/DateRangePicker.vue";

// 图表尺寸
const chartWidth = ref(315);
const chartHeight = ref(200);

// 日期选择器引用
const datePickerRef = ref(null);

// 数据类型菜单引用
const dataTypeMenuRef = ref(null);

// 数据类型列表
const dataTypeList = ref(["营业额", "应收金额", "订单数", "退单数"]);

// 当前选中的数据类型
const currentDataType = ref("营业额");

// 日期范围
const dateRangeText = ref("2025-10-01 — 2025-10-31");
const startDate = ref("2025-10-01");
const endDate = ref("2025-10-31");

// 统计数据
const statsList = ref([
  { label: "店铺营业额", value: "¥ 1455.15" },
  { label: "平台服务费", value: "¥ 291.03" },
  { label: "平台手续费", value: "¥ 4.34" },
  { label: "店铺应收金额", value: "¥ 1159.78" },
  { label: "店铺新增积分", value: "291.03" },
]);

// 图表配置
const chartOpts = ref({
  color: ["#ff9900"],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {
    show: false,
  },
  xAxis: {
    disableGrid: true,
    labelCount: 7,
    fontSize: 10,
    fontColor: "#999999",
  },
  yAxis: {
    gridType: "dash",
    dashLength: 4,
    data: [
      {
        min: 0,
        max: 800,
        fontSize: 10,
        fontColor: "#999999",
      },
    ],
  },
  extra: {
    line: {
      type: "curve",
      width: 2,
      activeType: "hollow",
    },
  },
});

// 图表数据
const chartData = ref({
  categories: ["10-14", "10-15", "10-16", "10-17", "10-18", "10-19", "10-20"],
  series: [
    {
      name: "营业额",
      data: [0, 0, 127, 793.15, 0, 0, 0],
    },
  ],
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 显示日期选择器
const showDatePicker = () => {
  datePickerRef.value?.open(startDate.value, endDate.value);
};

// 处理日期确认
const handleDateConfirm = (data) => {
  startDate.value = data.startDate;
  endDate.value = data.endDate;
  dateRangeText.value = `${data.startDate} — ${data.endDate}`;

  uni.showToast({
    title: "日期已更新",
    icon: "none",
  });

  // TODO: 根据选择的日期范围重新加载数据
};

// 处理日期重置
const handleDateReset = (data) => {
  startDate.value = data.startDate;
  endDate.value = data.endDate;
  dateRangeText.value = `${data.startDate} — ${data.endDate}`;

  // TODO: 重新加载数据
};

// 导出明细
const handleExport = () => {
  uni.navigateTo({
    url: "/pages/mine/financialData/downloadRecords",
  });
};

// 显示数据类型菜单
const showDataTypeMenu = () => {
  dataTypeMenuRef.value?.open();
};

// 选择数据类型
const selectDataType = (type) => {
  currentDataType.value = type;
  dataTypeMenuRef.value?.close();

  uni.showToast({
    title: `切换到${type}`,
    icon: "none",
  });

  // TODO: 根据选择的数据类型重新加载图表数据
};

onMounted(() => {
  console.log("财务数据页面加载完成");

  // 获取图表容器宽度
  uni
    .createSelectorQuery()
    .select(".chart-wrapper")
    .boundingClientRect((rect) => {
      if (rect) {
        chartWidth.value = rect.width;
      }
    })
    .exec();
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: 0;
  margin-top: 88rpx;
}

.content {
  padding: 20rpx 30rpx 40rpx 30rpx;
}

// 图表区域
.chart-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.chart-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.business-status {
  display: flex;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #ff9900;
  border-radius: 50%;
}

.status-text {
  font-size: 24rpx;
  color: #666;
}

.chart-wrapper {
  width: 100%;
  height: 400rpx;
}

// 数据统计范围
.date-range-section {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 24rpx;
}

.date-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.date-range-display {
  display: flex;
  align-items: center;
  gap: 8rpx;

  &:active {
    opacity: 0.7;
  }
}

.date-range-text {
  font-size: 24rpx;
  color: #666;
}

// 统计数据列表
.stats-list {
  background-color: #fff;
  border-radius: 0 0 16rpx 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.stats-label {
  font-size: 28rpx;
  color: #666;
}

.stats-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

// 导出按钮
.export-button {
  width: 100%;
  height: 88rpx;
  background-color: #ff9900;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  text {
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}

// 数据类型下拉菜单
.data-type-menu {
  background-color: #fff;
  padding: 16rpx 0;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 40rpx;

  &:active {
    background-color: #f5f5f5;
  }

  &.active {
    .menu-item-text {
      color: #fabc02;
      font-weight: 600;
    }
  }
}

.menu-item-text {
  font-size: 28rpx;
  color: #333;
}
</style>
